<template>
    <div class="headImgBox load-fade" :style="bgStyle">
        <div class="scene">
            <div><span id="luke"></span></div>
        </div>
        <div class="jiantou">
            <img src="../../static/img/headimg/jiantou.gif" />
        </div>
        <div class="h-information">
            <!-- <img :src="this.$store.state.themeObj.head_portrait ? this.$store.state.themeObj.head_portrait : 'static/img/tou.png'"
					alt=""> -->
            <h2 class="h-description"
                style="max-width:200%; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                {{ this.cn ? this.cn :
                    "我们一生追寻的东西，或许一开始就在！" }}
            </h2>
        </div>
    </div>
</template>
<script>
import { getText } from '../api/randomApi'
export default {
    data() {
        return {
            cn: '',
            scale: 1, // 初始缩放值  
            animationInterval: null,
            currentImageIndex: 0,
            // opacity: 0,
            images: [
                'url(../../static/img/headimg/head1.webp)',
                'url(../../static/img/headimg/head2.webp)',
                'url(../../static/img/headimg/head3.webp)',
                'url(../../static/img/headimg/head4.webp)',
            ],
            phoneimges: [
                'url(../../static/img/headimg/phonehead1.webp)',
                'url(../../static/img/headimg/phonehead2.webp)',
                'url(../../static/img/headimg/phonehead3.webp)',
                'url(../../static/img/headimg/phonehead4.webp)',
            ],
        }

    },
    methods: {
        startAnimation() {
            if (window.innerWidth < 500) {
                this.scale = 2
                this.images = this.phoneimges
                this.animationInterval = setInterval(() => {
                    // 放大背景图片
                    this.scale += 0.002;
                    if (this.scale > 2.5) { // 假设放大到1.5倍后更换图片  
                        this.scale = 2; // 重置缩放值  
                        this.currentImageIndex = (this.currentImageIndex + 1) % this.images.length; // 更换图片  
                    }
                }, 15);
            } else {
                this.animationInterval = setInterval(() => {
                    // 放大背景图片
                    this.scale += 0.0008;
                    if (this.scale > 1.2) { // 假设放大到1.5倍后更换图片
                        this.scale = 1; // 重置缩放值
                        this.currentImageIndex = (this.currentImageIndex + 1) % this.images.length; // 更换图片  
                    }
                }, 10);
            }
        },
        // opacityMethod() {
        //     setInterval(() => {
        //         if (this.opacity != 1) {
        //             this.opacity += 0.05;
        //         }
        //     }, 10)
        // },
        gettext() {
            getText().then((response) => {
                this.cn = response;
            })
            console.log("测试：" + this.cn)
        },
    },
    computed: {
        //背景图自动缩放
        bgStyle() {
            return {
                backgroundImage: this.images[this.currentImageIndex],
                backgroundSize: `${this.scale * 100}%`,
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
                opacity: this.opacity
            };
        },


    },
    beaforeDestroy() {
        clearInterval(this.animationInterval);
        // clearInterval(this.opacityMethod)
    },
    created() {
        this.startAnimation();
        this.gettext();
    },
}
</script>
<style>
.headImgBox {
    height: 650px;
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center 50%;
    background-repeat: no-repeat;
    margin-bottom: 50px;
}

.headImgBox .scene {
    width: 100%;
    /*height:300px;*/
    text-align: center;
    font-size: 100px;
    font-weight: 200;
    color: #fff;
    position: absolute;
    left: 0;
    top: 160px;
    font-family: 'Sigmar One', Arial;
    text-shadow: 0 2px 2px #47456d;

}

.headImgBox .scene span {
    transform: matrix(1, 0, 0, 1, 0, 0);
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    text-shadow: 1px 1px 0 #ff3f1a, -1px -1px 0 #00a7e0;
}
</style>